import { useState, useEffect } from 'react';
import { Popup, Picker } from 'react-vant';
import './index.less';
import {
  staticActionList,
  timeColumn,
  warmTimeColumn,
  deviceId
} from '../../utils/staticData';

export default function Action({
  propsAction,
  onLoopClick,
  onActionChange
}: any) {
  const Hejia = (window as any).Hejia;
  const { isOnline, status, mode, RunTime, warmDuration } = propsAction;
  const [visibleStr, setVisibleStr] = useState<String>('');
  const [minsList, setMinsList] = useState<string[]>(['0']);
  const [time, setTime] = useState<number>(RunTime);

  const [columes, setColumes] = useState(timeColumn());

  const state = {
    timeVisible: 'time'
  };

  useEffect(() => {
    console.log(mode, RunTime, warmDuration, '====================');
    // 设置时间
    if (mode === 9) {
      setColumes(warmTimeColumn());
      setMinsList([`${warmDuration}`]);
      setTime(warmDuration);
    } else {
      setColumes(timeColumn());
      setMinsList([`${RunTime}`]);
      setTime(RunTime);
    }
  }, [mode, RunTime, warmDuration]);

  const onClose = () => {
    setVisibleStr('');
    onLoopClick(true);
  };
  const onOpen = () => {
    onLoopClick(false);
  };

  const itemEle = (): JSX.Element => {
    return (
      <div
        className="action-item"
        key={1}
        onClick={() => setVisibleStr('time')}
      >
        <div className="left">
          <div className="title">运行时间</div>
          <div className="num">{time > 0 ? time + '分钟' : '未设置'}</div>
        </div>
        <i className="iconfont icon-arrow" />
      </div>
    );
  };

  return (
    <div className="action">
      <div className="mask-wapper">
        {/* 不可点击：
          1. 离线
          2. 待机，且没有选中模式
         */}
        {(!isOnline ||
          (status === 0 && mode === 0) ||
          status === 1 ||
          mode === 1 ||
          mode === 8 ||
          status === 3) && <div className="mask"></div>}
        {itemEle()}
      </div>

      {/* 时间弹框 */}
      <Popup
        round
        visible={state.timeVisible === visibleStr}
        position="bottom"
        onOpen={onOpen}
        onClose={onClose}
      >
        <div className="time-wrapper">
          <Picker
            value={minsList}
            title="设置时间"
            placeholder=""
            confirmButtonText="确定"
            columns={columes}
            onCancel={() => onClose()}
            onConfirm={(val: any) => {
              console.log(val);
              const mins: number = Number(val);
              // setMinsList([mins.toString()]);
              // setTime(mins);
              onActionChange(mins);
              onClose();

              let paramKey: string = 'RunTime';

              if (mode === 9) {
                paramKey = 'InsulationRunningTime';
              } else {
                paramKey = 'RunTime';
              }
              Hejia.setControlParam(
                {
                  // deviceId,
                  parameters: {
                    param: [
                      {
                        name: paramKey,
                        content: mins
                      }
                    ]
                  }
                },
                function () {
                  // success, no response
                  console.log('success');
                },
                function (msg: string, obj: any) {
                  console.log(msg + obj.resultCode + obj.resultCodeMessage);
                }
              );
            }}
          />
          <div className="unit">分钟</div>
        </div>
      </Popup>
    </div>
  );
}
